import * as echarts from 'echarts';

const data21 = () => {
  const chartData = [
    {
      value: 520,
      name: "消费电子",
    },
    {
      value: 280,
      name: "服饰",
    },
    {
      value: 100,
      name: "家纺",
    },
    {
      value: 100,
      name: "日用百货",
    },
  ];
  const colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff",
      },
      {
        offset: 1,
        color: "#87cdffaa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889baa",
      },
    ]),
  ];
  const colorList2 = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff00",
      },
      {
        offset: 1,
        color: "#87cdff",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889b00",
      },
    ]),
  ];
  const sum = chartData.reduce((per, cur) => per + cur.value, 0);
  const gap = (1 * sum) / 100;
  const pieData1 = [];
  const pieData2 = [];
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "transparent",
    },
  };
  for (let i = 0; i < chartData.length; i++) {
    pieData1.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 20,
        shadowColor: "#2a2a34",
        shadowBlur: 5,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
        borderWidth: 2,
      },
    });
    pieData1.push(gapData);

    pieData2.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 1,
        color: colorList2[i],
        opacity: 0.5,
        shadowColor: "#000",
        shadowBlur: 1,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
      },
    });
    pieData2.push(gapData);
  }
  const option = {
    title: [
      {
        text: "75.0%",
        x: "30%",
        y: "35%",
        textAlign: "center",
        textStyle: {
          fontSize: "18",
          fontWeight: "500",
          color: "#98b5d2",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 2,
          textShadowOffsetY: 2,
        },
      },
      {
        text: "消费电子",
        left: "30%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontSize: "18",
          fontWeight: "400",
          color: "#5c5a68",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 1,
          textShadowOffsetY: 1,
        },
      },
    ],
    legend: {
      left: "60%",
      top: "20%",
      align: "left",
      itemGap: 12,
      itemWidth: 10,
      itemHeight: 10,
      shadowBlur: 0,
      shadowOffsetY: 0,
      shadowOffsetX: 0,
      borderWidth: 0,

      // type: 'scroll', 
      textStyle: {
        color: "#D8DDE3",
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            fontSize: 16,
            color: "#D8DDE3",
            width: "70%",
          },
          percent: {
            padding: [0, 0, 0, 10],
            color: "#D8DDE3",
            fontSize: 16,
          },
        },
      },
      formatter: (name) => {
        const item = chartData.find((i) => {
          return i.name === name;
        });
        const p = ((item.value / sum) * 100).toFixed(0);
        return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
      },
    },
    color: colorList,
    series: [
      {
        type: "pie",
        z: 3,
        roundCap: true,
        radius: ["83%", "90%"],
        center: ["30%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: pieData1,
      },
      {
        type: "pie",
        z: 2,
        radius: ["50%", "55%"],
        center: ["30%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        silent: true,
        data: pieData2,
      },
    ],
  };

  const opt = Object.assign({},option);
  return opt;
}

const data22 = () => {
  const chartData = [
    {
      value: 520,
      name: "紧急事件",
    },
    {
      value: 280,
      name: "重大事件",
    },
    {
      value: 100,
      name: "一般事件",
    },
    {
      value: 100,
      name: "其他事件",
    },
  ];
  const colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff",
      },
      {
        offset: 1,
        color: "#87cdffaa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889baa",
      },
    ]),
  ];
  const colorList2 = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff00",
      },
      {
        offset: 1,
        color: "#87cdff",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889b00",
      },
    ]),
  ];
  const sum = chartData.reduce((per, cur) => per + cur.value, 0);
  const gap = (1 * sum) / 100;
  const pieData1 = [];
  const pieData2 = [];
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "transparent",
    },
  };
  for (let i = 0; i < chartData.length; i++) {
    pieData1.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 20,
        shadowColor: "#2a2a34",
        shadowBlur: 5,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
        borderWidth: 2,
      },
    });
    pieData1.push(gapData);

    pieData2.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 1,
        color: colorList2[i],
        opacity: 0.5,
        shadowColor: "#000",
        shadowBlur: 1,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
      },
    });
    pieData2.push(gapData);
  }
  const option = {
    legend: {
      left: "60%",
      top: "20%",
      align: "left",
      itemGap: 12,
      itemWidth: 10,
      itemHeight: 10,
      shadowBlur: 0,
      shadowOffsetY: 0,
      shadowOffsetX: 0,
      borderWidth: 0,

      // type: 'scroll', 
      textStyle: {
        color: "#D8DDE3",
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            fontSize: 16,
            color: "#D8DDE3",
            width: "70%",
          },
          percent: {
            padding: [0, 0, 0, 10],
            color: "#D8DDE3",
            fontSize: 16,
          },
        },
      },
      formatter: (name) => {
        const item = chartData.find((i) => {
          return i.name === name;
        });
        return "{name|" + name + "}" + "{percent|" + item.value + "}" ;
      },
    },
    color: colorList,
    series: [
      {
        type: "pie",
        z: 3,
        roundCap: true,
        radius: ["80%", "90%"],
        center: ["30%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: pieData1,
      },
      {
        type: "pie",
        z: 2,
        radius: ["50%", "55%"],
        center: ["30%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        silent: true,
        data: pieData2,
      },
    ],
  };

  const opt = Object.assign({},option);
  return opt;
}

const data23 = () => {
  const chartData = [
    {
      value: 120,
      name: "在岗人数",
    },
    {
      value: 23,
      name: "离岗人数",
    }
  ];
  const colorList = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff",
      },
      {
        offset: 1,
        color: "#87cdffaa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89caa",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889baa",
      },
    ]),
  ];
  const colorList2 = [
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#87cdff00",
      },
      {
        offset: 1,
        color: "#87cdff",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ff744c",
      },
      {
        offset: 1,
        color: "#ff744c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#ffb89c",
      },
      {
        offset: 1,
        color: "#ffb89c00",
      },
    ]),
    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      {
        offset: 0,
        color: "#6c889b",
      },
      {
        offset: 1,
        color: "#6c889b00",
      },
    ]),
  ];
  const sum = chartData.reduce((per, cur) => per + cur.value, 0);
  const gap = (1 * sum) / 100;
  const pieData1 = [];
  const pieData2 = [];
  const gapData = {
    name: "",
    value: gap,
    itemStyle: {
      color: "transparent",
    },
  };
  for (let i = 0; i < chartData.length; i++) {
    pieData1.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 20,
        shadowColor: "#2a2a34",
        shadowBlur: 5,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
        borderWidth: 2,
      },
    });
    pieData1.push(gapData);

    pieData2.push({
      ...chartData[i],
      itemStyle: {
        borderRadius: 1,
        color: colorList2[i],
        opacity: 0.5,
        shadowColor: "#000",
        shadowBlur: 1,
        shadowOffsetY: 0,
        shadowOffsetX: 0,
      },
    });
    pieData2.push(gapData);
  }
  const option = {
    title: [
      {
        text: "120",
        x: "48%",
        y: "35%",
        textAlign: "center",
        textStyle: {
          fontSize: "20",
          fontWeight: "600",
          color: "#ddd",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 2,
          textShadowOffsetY: 2,
        },
      },
      {
        text: "安保人数",
        left: "48%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontSize: "14",
          fontWeight: "400",
          color: "#ddd",
          textAlign: "center",
          textShadowColor: "#000",
          textShadowBlur: "1",
          textShadowOffsetX: 1,
          textShadowOffsetY: 1,
        },
      },
    ],
    legend: {
      show:false,
      left: "60%",
      top: "20%",
      align: "left",
      itemGap: 12,
      itemWidth: 10,
      itemHeight: 10,
      shadowBlur: 0,
      shadowOffsetY: 0,
      shadowOffsetX: 0,
      borderWidth: 0,

      // type: 'scroll', 
      textStyle: {
        color: "#D8DDE3",
        rich: {
          name: {
            verticalAlign: "right",
            align: "left",
            fontSize: 16,
            color: "#D8DDE3",
            width: "70%",
          },
          percent: {
            padding: [0, 0, 0, 10],
            color: "#D8DDE3",
            fontSize: 16,
          },
        },
      },
      formatter: (name) => {
        const item = chartData.find((i) => {
          return i.name === name;
        });
        const p = ((item.value / sum) * 100).toFixed(0);
        return "{name|" + name + "}" + "{percent|" + p + "}" + " %";
      },
    },
    color: colorList,
    series: [
      {
        type: "pie",
        z: 3,
        roundCap: true,
        radius: ["68%", "80%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: pieData1,
      },
      {
        type: "pie",
        z: 2,
        radius: ["50%", "55%"],
        center: ["50%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        silent: true,
        data: pieData2,
      },
    ],
  };

  const opt = Object.assign({},option);
  return opt;
}
export default {
  data21,
  data22,
  data23
}